<template>
  <div class="echart">
    <div ref="divRef" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, watchEffect } from 'vue'
import type { PropType } from 'vue'
import type { EChartsOption } from 'echarts'
import { useEchart } from '../hooks/use-echart'

const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '360px'
  },
  options: {
    type: Object as PropType<EChartsOption>,
    required: true
  }
})
const divRef = ref<InstanceType<typeof HTMLElement>>()
onMounted(() => {
  const { setOptions } = useEchart(divRef.value!)
  // options更新之后重新渲染
  watchEffect(() => {
    setOptions(props.options)
  })
})
</script>

<style lang="less" scoped></style>
